<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岚小字识字系统 - 拖拽组合练习</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .app-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            color: white;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .game-area {
            display: grid;
            grid-template-columns: 300px 1fr 350px;
            gap: 30px;
            height: 80vh;
        }

        /* 字根库 */
        .zigen-library {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
        }

        .library-title {
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e2e8f0;
            text-align: center;
        }

        .zigen-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            max-height: 600px;
            overflow-y: auto;
        }

        .zigen-item {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 10px;
            border-radius: 12px;
            text-align: center;
            cursor: grab;
            transition: all 0.3s;
            user-select: none;
        }

        .zigen-item:active {
            cursor: grabbing;
        }

        .zigen-item:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }

        .zigen-char {
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .zigen-name {
            font-size: 12px;
            opacity: 0.9;
        }

        /* 组合区域 */
        .compose-area {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
        }

        .compose-title {
            font-size: 20px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 20px;
            text-align: center;
        }

        .drop-zone {
            flex: 1;
            border: 3px dashed #cbd5e0;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 300px;
            transition: all 0.3s;
            position: relative;
        }

        .drop-zone.drag-over {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.1);
        }

        .drop-hint {
            color: #a0aec0;
            font-size: 16px;
            text-align: center;
            margin-bottom: 20px;
        }

        .compose-display {
            display: flex;
            gap: 20px;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
        }

        .compose-char {
            background: #f7fafc;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            font-weight: bold;
            color: #2d3748;
            position: relative;
        }

        .compose-char.filled {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
        }

        .compose-char .remove-btn {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #e53e3e;
            color: white;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            cursor: pointer;
            display: none;
        }

        .compose-char.filled:hover .remove-btn {
            display: block;
        }

        .plus-sign {
            font-size: 2rem;
            color: #a0aec0;
        }

        .result-char {
            background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
            color: white;
            font-size: 3rem;
            width: 100px;
            height: 100px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }

        .action-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 20px;
        }

        .action-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-primary { background: #667eea; color: white; }
        .btn-success { background: #48bb78; color: white; }
        .btn-secondary { background: #e2e8f0; color: #4a5568; }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        /* 复合字详情 */
        .compound-details {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            overflow-y: auto;
        }

        .details-title {
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 20px;
            text-align: center;
        }

        .compound-preview {
            background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
            color: white;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            text-align: center;
        }

        .compound-char-display {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .compound-pinyin {
            font-size: 18px;
            margin-bottom: 5px;
        }

        .detail-section {
            margin-bottom: 20px;
        }

        .detail-label {
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .detail-content {
            background: #f7fafc;
            padding: 12px;
            border-radius: 8px;
            border-left: 4px solid #667eea;
            font-size: 14px;
            line-height: 1.6;
        }

        .word-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .word-item {
            background: #667eea;
            color: white;
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 13px;
            font-weight: 500;
        }

        .sentence-item {
            background: #f0fff4;
            border: 1px solid #68d391;
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 8px;
            font-size: 14px;
        }

        /* 进度条 */
        .progress-bar {
            background: rgba(255,255,255,0.95);
            border-radius: 10px;
            padding: 15px 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .progress-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .progress-track {
            height: 8px;
            background: #e2e8f0;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
            border-radius: 4px;
            transition: width 0.3s;
        }

        /* 响应式 */
        @media (max-width: 1200px) {
            .game-area {
                grid-template-columns: 250px 1fr 300px;
            }
        }

        @media (max-width: 968px) {
            .game-area {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto;
                height: auto;
            }
            
            .zigen-library, .compound-details {
                max-height: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部 -->
        <div class="header">
            <h1>🧩 拖拽组合练习</h1>
            <p>岚小字识字系统 - 字根部首组合形成复合字</p>
        </div>

        <!-- 课程选择 -->
        <div class="progress-bar">
            <div class="progress-info">
                <span>当前课程</span>
                <select id="lesson-select" onchange="switchLesson()" style="padding: 5px 10px; border-radius: 5px; border: 1px solid #ddd;">
                    <option value="lesson1">第1课：土地相关字根</option>
                    <option value="lesson2">第2课：水火字根组合</option>
                    <option value="lesson3">第3课：复杂三字组合</option>
                </select>
                <span id="progress-text">0/10</span>
            </div>
            <div class="progress-track">
                <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
            </div>
        </div>

        <div class="game-area">
            <!-- 左侧字根库 -->
            <div class="zigen-library">
                <div class="library-title">🏗️ 字根部首库</div>
                <div class="zigen-grid" id="zigen-grid">
                    <!-- 字根项目将通过JavaScript生成 -->
                </div>
            </div>

            <!-- 中间组合区域 -->
            <div class="compose-area">
                <div class="compose-title">🎯 拖拽组合区域</div>
                
                <div class="drop-zone" id="drop-zone">
                    <div class="drop-hint">将字根和部首拖拽到这里组合成复合字</div>
                    
                    <div class="compose-display" id="compose-display">
                        <div class="compose-char" data-position="0">
                            <span>？</span>
                            <button class="remove-btn" onclick="removeChar(0)">×</button>
                        </div>
                        <div class="plus-sign">+</div>
                        <div class="compose-char" data-position="1">
                            <span>？</span>
                            <button class="remove-btn" onclick="removeChar(1)">×</button>
                        </div>
                        <div class="plus-sign" id="plus-sign-2" style="display: none;">+</div>
                        <div class="compose-char" data-position="2" id="compose-char-3" style="display: none;">
                            <span>？</span>
                            <button class="remove-btn" onclick="removeChar(2)">×</button>
                        </div>
                        <div class="plus-sign">=</div>
                        <div class="result-char" id="result-char">?</div>
                    </div>

                    <div class="action-buttons">
                        <button class="action-btn btn-success" onclick="checkComposition()">✅ 检查组合</button>
                        <button class="action-btn btn-secondary" onclick="clearComposition()">🔄 重新开始</button>
                        <button class="action-btn btn-primary" onclick="getHint()">💡 提示</button>
                    </div>
                </div>
            </div>

            <!-- 右侧复合字详情 -->
            <div class="compound-details">
                <div class="details-title">📖 复合字详解</div>
                
                <div id="no-result" style="text-align: center; color: #a0aec0; margin-top: 100px;">
                    <div style="font-size: 3rem; margin-bottom: 15px;">🤔</div>
                    <p>组合成功后查看详细信息</p>
                </div>

                <div id="compound-info" style="display: none;">
                    <div class="compound-preview">
                        <div class="compound-char-display" id="compound-char">地</div>
                        <div class="compound-pinyin" id="compound-pinyin">dì</div>
                    </div>

                    <div class="detail-section">
                        <div class="detail-label">📝 含义解释</div>
                        <div class="detail-content" id="compound-meaning">
                            地球表面的土壤，人类居住的地方
                        </div>
                    </div>

                    <div class="detail-section">
                        <div class="detail-label">🔤 组词练习</div>
                        <div class="detail-content">
                            <div class="word-list" id="compound-words">
                                <span class="word-item">土地</span>
                                <span class="word-item">地面</span>
                                <span class="word-item">地下</span>
                                <span class="word-item">大地</span>
                            </div>
                        </div>
                    </div>

                    <div class="detail-section">
                        <div class="detail-label">💬 造句示例</div>
                        <div class="detail-content" id="compound-sentences">
                            <div class="sentence-item">春天来了，大地披上了绿装。</div>
                            <div class="sentence-item">农民伯伯在地里种菜。</div>
                        </div>
                    </div>

                    <div class="action-buttons" style="margin-top: 20px;">
                        <button class="action-btn btn-primary" onclick="playPronunciation()">🔊 朗读</button>
                        <button class="action-btn btn-success" onclick="nextExercise()">➡️ 下一个</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 课程数据结构
        let lessonsData = {
            lesson1: {
                title: "第1课：土地相关字根",
                description: "学习土、也等字根的基础组合",
                zigens: [
                    { id: 1, char: '土', name: '土字旁', type: 'bushou' },
                    { id: 2, char: '也', name: '也字根', type: 'zigen' },
                    { id: 3, char: '皮', name: '皮字根', type: 'zigen' },
                    { id: 4, char: '支', name: '支字根', type: 'zigen' }
                ],
                compounds: {
                    '土也': { char: '地', pinyin: 'dì', meaning: '地球表面的土壤，人类居住的地方', words: ['土地', '地面', '地下', '大地', '地方'], sentences: ['春天来了，大地披上了绿装。', '农民伯伯在地里种菜。'] },
                    '皮支': { char: '坡', pinyin: 'pō', meaning: '倾斜的地面，山坡', words: ['山坡', '坡地', '上坡', '下坡', '缓坡'], sentences: ['我们爬上了陡峭的山坡。', '小车慢慢地开上坡路。'] }
                },
                totalExercises: 5
            },
            lesson2: {
                title: "第2课：水火字根组合", 
                description: "学习水、火、田、白等字根组合",
                zigens: [
                    { id: 1, char: '水', name: '水字旁', type: 'bushou' },
                    { id: 2, char: '火', name: '火字旁', type: 'bushou' },
                    { id: 3, char: '田', name: '田字根', type: 'zigen' },
                    { id: 4, char: '白', name: '白字根', type: 'zigen' }
                ],
                compounds: {
                    '水田': { char: '池', pinyin: 'chí', meaning: '人工挖掘的蓄水坑', words: ['池塘', '水池', '游泳池', '池水', '鱼池'], sentences: ['池塘里有很多小鱼。', '夏天我们在游泳池里游泳。'] },
                    '火白': { char: '的', pinyin: 'de', meaning: '表示所属关系的助词', words: ['我的', '你的', '他的', '好的', '红的'], sentences: ['这是我的书包。', '天空是蓝的。'] }
                },
                totalExercises: 6
            },
            lesson3: {
                title: "第3课：复杂三字组合",
                description: "掌握高级三字根组合技巧",
                zigens: [
                    { id: 1, char: '木', name: '木字旁', type: 'bushou' },
                    { id: 2, char: '白', name: '白字根', type: 'zigen' },
                    { id: 3, char: '干', name: '干字根', type: 'zigen' },
                    { id: 4, char: '水', name: '水字旁', type: 'bushou' },
                    { id: 5, char: '也', name: '也字根', type: 'zigen' },
                    { id: 6, char: '火', name: '火字旁', type: 'bushou' },
                    { id: 7, char: '田', name: '田字根', type: 'zigen' }
                ],
                compounds: {
                    '木白干': { char: '柏', pinyin: 'bǎi', meaning: '一种常绿树木，松柏', words: ['松柏', '柏树', '柏叶', '翠柏', '柏油'], sentences: ['松柏四季常青。', '古老的柏树很高大。'] },
                    '水白也': { char: '泊', pinyin: 'bó', meaning: '停船的地方，湖泊', words: ['湖泊', '停泊', '泊位', '血泊', '漂泊'], sentences: ['美丽的湖泊波光粼粼。', '船只停泊在港口。'] },
                    '火木田': { char: '焦', pinyin: 'jiāo', meaning: '物体燃烧后变黑变硬', words: ['焦急', '焦点', '焦虑', '焦糖', '焦炭'], sentences: ['妈妈焦急地等待着。', '太阳是焦点所在。'] }
                },
                totalExercises: 8
            }
        };

        // 全局变量
        let currentLesson = 'lesson1';
        let ziGenData = [];
        let compoundData = {};
        let currentComposition = ['', '', ''];
        let currentProgress = 0;
        let totalExercises = 5;

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadLesson(currentLesson);
            setupDragAndDrop();
            updateProgress();
        });

        // 加载课程
        function loadLesson(lessonId) {
            currentLesson = lessonId;
            const lesson = lessonsData[lessonId];
            
            // 更新字根数据和组合数据
            ziGenData = lesson.zigens;
            compoundData = lesson.compounds;
            totalExercises = lesson.totalExercises;
            
            // 重置进度
            currentProgress = 0;
            currentComposition = ['', '', ''];
            
            // 更新界面
            document.querySelector('.library-title').textContent = `🏗️ ${lesson.title}`;
            renderZiGenLibrary();
            clearComposition();
            updateProgress();
            
            // 更新课程选择器
            document.getElementById('lesson-select').value = lessonId;
        }

        // 切换课程
        function switchLesson() {
            const selectedLesson = document.getElementById('lesson-select').value;
            loadLesson(selectedLesson);
        }

        // 渲染字根库
        function renderZiGenLibrary() {
            const container = document.getElementById('zigen-grid');
            container.innerHTML = ziGenData.map(item => `
                <div class="zigen-item" draggable="true" data-id="${item.id}" data-char="${item.char}">
                    <div class="zigen-char">${item.char}</div>
                    <div class="zigen-name">${item.name}</div>
                </div>
            `).join('');
        }

        // 设置拖拽功能
        function setupDragAndDrop() {
            // 拖拽开始
            document.addEventListener('dragstart', function(e) {
                if (e.target.classList.contains('zigen-item')) {
                    e.dataTransfer.setData('text/plain', e.target.dataset.char);
                    e.target.style.opacity = '0.5';
                }
            });

            // 拖拽结束
            document.addEventListener('dragend', function(e) {
                if (e.target.classList.contains('zigen-item')) {
                    e.target.style.opacity = '1';
                }
            });

            // 拖拽悬停
            document.addEventListener('dragover', function(e) {
                if (e.target.closest('.compose-char') || e.target.closest('.drop-zone')) {
                    e.preventDefault();
                    document.getElementById('drop-zone').classList.add('drag-over');
                }
            });

            // 拖拽离开
            document.addEventListener('dragleave', function(e) {
                if (!e.target.closest('.drop-zone')) {
                    document.getElementById('drop-zone').classList.remove('drag-over');
                }
            });

            // 放下
            document.addEventListener('drop', function(e) {
                e.preventDefault();
                document.getElementById('drop-zone').classList.remove('drag-over');
                
                const char = e.dataTransfer.getData('text/plain');
                const composeChar = e.target.closest('.compose-char');
                
                if (composeChar) {
                    const position = parseInt(composeChar.dataset.position);
                    addCharToComposition(char, position);
                }
            });
        }

        // 添加字符到组合
        function addCharToComposition(char, position) {
            currentComposition[position] = char;
            const composeChar = document.querySelector(`[data-position="${position}"]`);
            composeChar.querySelector('span').textContent = char;
            composeChar.classList.add('filled');
            
            // 检查是否需要显示第三个组合框
            if (currentComposition[0] && currentComposition[1] && !currentComposition[2]) {
                document.getElementById('plus-sign-2').style.display = 'block';
                document.getElementById('compose-char-3').style.display = 'flex';
            }
            
            // 检查是否可以组合（两个或三个字符）
            if (currentComposition[0] && currentComposition[1]) {
                // 先检查两字组合
                const twoCharKey = currentComposition.slice(0, 2).join('');
                const twoCharReverse = currentComposition.slice(0, 2).reverse().join('');
                
                // 再检查三字组合
                if (currentComposition[2]) {
                    const threeCharKey = currentComposition.join('');
                    const threeCharReverse = currentComposition.slice().reverse().join('');
                    
                    if (compoundData[threeCharKey] || compoundData[threeCharReverse]) {
                        const compound = compoundData[threeCharKey] || compoundData[threeCharReverse];
                        document.getElementById('result-char').textContent = compound.char;
                        showCompoundDetails(compound);
                        return;
                    }
                }
                
                // 如果没有三字组合，检查两字组合
                if (compoundData[twoCharKey] || compoundData[twoCharReverse]) {
                    const compound = compoundData[twoCharKey] || compoundData[twoCharReverse];
                    document.getElementById('result-char').textContent = compound.char;
                    showCompoundDetails(compound);
                } else {
                    document.getElementById('result-char').textContent = '?';
                    hideCompoundDetails();
                }
            }
        }

        // 移除字符
        function removeChar(position) {
            currentComposition[position] = '';
            const composeChar = document.querySelector(`[data-position="${position}"]`);
            composeChar.querySelector('span').textContent = '？';
            composeChar.classList.remove('filled');
            
            // 如果移除的是前两个字符中的任一个，隐藏第三个组合框
            if (position < 2 && (!currentComposition[0] || !currentComposition[1])) {
                document.getElementById('plus-sign-2').style.display = 'none';
                document.getElementById('compose-char-3').style.display = 'none';
                currentComposition[2] = '';
                const thirdChar = document.querySelector(`[data-position="2"]`);
                thirdChar.querySelector('span').textContent = '？';
                thirdChar.classList.remove('filled');
            }
            
            document.getElementById('result-char').textContent = '?';
            hideCompoundDetails();
            
            // 重新检查组合
            if (currentComposition[0] && currentComposition[1]) {
                addCharToComposition(currentComposition[0], 0);
            }
        }

        // 显示复合字详情
        function showCompoundDetails(compound) {
            document.getElementById('no-result').style.display = 'none';
            document.getElementById('compound-info').style.display = 'block';
            
            document.getElementById('compound-char').textContent = compound.char;
            document.getElementById('compound-pinyin').textContent = compound.pinyin;
            document.getElementById('compound-meaning').textContent = compound.meaning;
            
            // 组词
            const wordsContainer = document.getElementById('compound-words');
            wordsContainer.innerHTML = compound.words.map(word => 
                `<span class="word-item">${word}</span>`
            ).join('');
            
            // 造句
            const sentencesContainer = document.getElementById('compound-sentences');
            sentencesContainer.innerHTML = compound.sentences.map(sentence => 
                `<div class="sentence-item">${sentence}</div>`
            ).join('');
        }

        // 隐藏复合字详情
        function hideCompoundDetails() {
            document.getElementById('no-result').style.display = 'block';
            document.getElementById('compound-info').style.display = 'none';
        }

        // 检查组合
        function checkComposition() {
            if (!currentComposition[0] || !currentComposition[1]) {
                alert('请先拖拽至少两个字符进行组合！');
                return;
            }

            // 检查三字组合
            if (currentComposition[2]) {
                const threeCharKey = currentComposition.join('');
                const threeCharReverse = currentComposition.slice().reverse().join('');
                
                if (compoundData[threeCharKey] || compoundData[threeCharReverse]) {
                    alert('🎉 三字组合正确！这是高级组合，很棒！');
                    currentProgress++;
                    updateProgress();
                    return;
                }
            }
            
            // 检查两字组合
            const twoCharKey = currentComposition.slice(0, 2).join('');
            const twoCharReverse = currentComposition.slice(0, 2).reverse().join('');
            
            if (compoundData[twoCharKey] || compoundData[twoCharReverse]) {
                if (currentComposition[2]) {
                    alert('✅ 前两个字符组合正确！但加上第三个字符后无法形成复合字，试试其他组合吧！');
                } else {
                    alert('🎉 两字组合正确！继续学习这个复合字吧！');
                    currentProgress++;
                    updateProgress();
                }
            } else {
                alert('❌ 这个组合无法形成复合字，请尝试其他组合！');
            }
        }

        // 清除组合
        function clearComposition() {
            currentComposition = ['', '', ''];
            document.querySelectorAll('.compose-char').forEach((el, index) => {
                el.querySelector('span').textContent = '？';
                el.classList.remove('filled');
            });
            
            // 隐藏第三个组合框
            document.getElementById('plus-sign-2').style.display = 'none';
            document.getElementById('compose-char-3').style.display = 'none';
            
            document.getElementById('result-char').textContent = '?';
            hideCompoundDetails();
        }

        // 获取提示
        function getHint() {
            const lesson = lessonsData[currentLesson];
            const availableZigens = lesson.zigens.map(z => z.char);
            const availableCompounds = Object.keys(lesson.compounds);
            
            // 根据当前课程生成具体提示
            let hints = [];
            
            // 基于当前课程的字根生成提示
            if (currentLesson === 'lesson1') {
                hints = [
                    '💡 试试用"土"和"也"组合成表示地面的字',
                    '💡 "皮"和"支"可以组成表示倾斜地面的字',
                    '💡 这一课都是关于土地的字，想想土地相关的词语'
                ];
            } else if (currentLesson === 'lesson2') {
                hints = [
                    '💡 "水"和"田"能组成蓄水的地方',
                    '💡 "火"和"白"组成很常用的助词',
                    '💡 这一课是水火相关，想想水池、火光'
                ];
            } else if (currentLesson === 'lesson3') {
                hints = [
                    '💡 高级挑战："木"+"白"+"干"组成常绿树木名称',
                    '💡 三字组合："水"+"白"+"也"能组成什么？',
                    '💡 复杂组合："火"+"木"+"田"试试看',
                    '💡 这是最难的课程，需要三个字根组合'
                ];
            }
            
            // 添加通用提示
            hints.push('💡 可以尝试调换字根的顺序');
            hints.push('💡 有些字需要三个字根才能组成');
            
            const randomHint = hints[Math.floor(Math.random() * hints.length)];
            alert(randomHint);
        }

        // 播放发音
        function playPronunciation() {
            const char = document.getElementById('compound-char').textContent;
            const pinyin = document.getElementById('compound-pinyin').textContent;
            
            // 这里可以集成语音合成API
            if ('speechSynthesis' in window) {
                const utterance = new SpeechSynthesisUtterance(char);
                utterance.lang = 'zh-CN';
                utterance.rate = 0.8;
                speechSynthesis.speak(utterance);
            } else {
                alert(`🔊 ${char} (${pinyin})`);
            }
        }

        // 下一个练习
        function nextExercise() {
            clearComposition();
            alert('🎯 继续尝试新的字根组合吧！');
        }

        // 更新进度
        function updateProgress() {
            const percentage = (currentProgress / totalExercises) * 100;
            document.getElementById('progress-text').textContent = `${currentProgress}/${totalExercises}`;
            document.getElementById('progress-fill').style.width = `${percentage}%`;
        }
    </script>
</body>
</html> 